<template>
	<view class="">
		<!-- menu菜单 平台数据  新闻资讯 -->
		<view class="news-box">
			<!-- menu菜单 -->
			<menus :types="4" />
			<!-- 平台数据 -->
			<!-- <statistic /> -->
			<!-- 新闻资讯 -->
			<newsModule />
		</view>
		<!-- 我的商家服务 -->
		<!-- 我的需求 -->
		<view class="module-box demand-box">
			<view class="acea-row row-middle row-between">
				<view class="module-title">我的商家服务</view>
				<view class="demand-num">{{demandList.length>0?demandIdx+1:0}} / {{demandList.length || 0}}</view>
			</view>
			<view class="demand-swiper">
				<swiper class="swiper-box" :current="demandIdx" :indicator-dots="false" :autoplay="false"
					:interval="3000" :duration="1000" @change="changeSwiperDemand" v-if="demandList.length>0">
					<swiper-item class="swiper-item" v-for="(item,index) in demandList" :key="index">
						<view class="swiper-item">
							<view class="item-main">
								<view class="item-center"
									@click="toPage('/pages/details/merchantService/merchantService?id='+item.id)">
									<view class="acea-row">
										<img class='item-img' :src="item.image?item.image:noimageshow" alt="">
										<view class="content-main ">
											<!-- <p>公司名称：20-50m</p> -->
											<p>服务类别：{{ item.typeName || ''}}</p>
											<p>服务区域：{{ item.area || ''}}</p>
											<p>服务金额：{{ item.price || 0}}元</p>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="noData" v-else>暂无数据</view>
			</view>
		</view>

		<!-- 悬赏任务（规则） -->
		<taskBox :tabNavOn="tabNavOn" />

		<!-- 推荐 -->
		<goods />
	</view>
</template>

<script>
	import swiperDot from "../swiperDots/swiperDots.vue";
	import menus from '../menu.vue'
	import statistic from '../statistic.vue'
	import secondHand from '../secondHand.vue'
	import taskBox from '../taskBox.vue'
	import goods from '../goods.vue'
	import {
		getSupplyApi,
		getOnMerchantListApi,
	} from "@/api/api.js";
	import {
		toPage
	} from '@/filters/commFilter.js'
	import newsModule from '../newsModule.vue'
	export default {

		components: {
			swiperDot,
			menus,
			newsModule,
			statistic,
			secondHand,
			taskBox,
			goods
		},
		props: {
			tabNavOn: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				toPage,
				goodsTabOn: 2,
				goodsTab: ['推荐', '附近', '最新'],
				current: 0,
				circular: true,
				autoplay: false,
				interval: 3000,
				duration: 500,
				noimageshow: this.$noImageShow,
				// 浏览信息头像数组
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				demandIdx: 0, //我的需求当前下标
				goodsList: [1, 2],
				brandShopList: [1, 2, 3, 4, 5],
				projectList: [1, 2, 3],
				demandList: [],
				demandLength: 4, //我的所有需求
			}
		},
		created() {
			this.getOnList()
		},
		methods: {
			needsSwiperChange(e) {
				this.demandIdx = e.detail.current;
			},

			menuSwiperChange(e) {
				this.current = e.detail.current;
			},
			//我的需求
			async getOnList() {
				console.log('tabNavOn', this.tabNavOn)
				try {
					let res = await getOnMerchantListApi({
						limit: 4
					});
					this.demandList = res.data.list;
					console.log('sjfw', this.demandList)
				} catch (e) {
					//TODO handle the exception

				}
			},
			changeSwiperDemand(e) {
				this.demandIdx = e.detail.current
			},

		}
	}
</script>

<style lang="scss">
	// menus 新闻资讯
	// //设置轮播的指示点大小
	// .uni-swiper-wrapper {
	//     /deep/ .uni-swiper-dots { // 指示点整个区域
	//         // bottom: 100rpx;
	//     }
	//     /deep/ .uni-swiper-dot { // 指示点元素默认样式
	//         width: 10upx !important;
	//         height: 10upx !important;
	//         // border: 1rpx solid #E0B079;
	//     }
	//     /deep/ .uni-swiper-dot-active { // 指示点元素激活（当前选中）状态样式
	//         // background: #CD9763;
	//     }
	// }
	// 各个模块样式
	.module-box {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;

		.module-title {
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			&::after {
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);

			}
		}
	}

	.btns {
		.white-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: #ffffff;
			font-size: 24rpx;
			color: rgba(238, 33, 45, 1);
			margin-right: 16rpx;
		}

		.red-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			font-size: 24rpx;
			color: #ffffff;
		}
	}

	.news-box {
		width: calc(100% - 52rpx);
		margin: 164rpx 26rpx 28rpx;
		background: #ffffff;
		opacity: 1;
		border-radius: 10rpx;
		padding: 36rpx;
	}

	// 悬赏任务
	.task-box {
		.task-more-btn {
			margin: 24rpx auto;
			width: 222rpx;
			height: 52rpx;
			opacity: 1;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 26rpx;
			font-weight: 400;
			line-height: 52rpx;
			color: rgba(238, 33, 45, 1);
			text-align: center;
		}

		.task-top-btn {
			width: 154rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}

		.task-list {
			.task-item {
				padding: 16rpx 22rpx;
				height: 218rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 2rpx 4rpx 8rpx 10rpx rgba(0, 0, 0, 0.03);
				margin-top: 28rpx;

				.item-top {
					.task-tit {
						width: 65%;
					}

					.task-tit-l {
						// width: 30%;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
						text-align: center;

						.task-top-btn {
							width: 132rpx;
							height: 42rpx;
							margin: 0 auto 6rpx;
							line-height: 42rpx;
							text-align: center;
							border-radius: 50rpx;
							background: rgba(238, 33, 45, 1);
							border: 1px solid rgba(235, 36, 61, 1);
							color: #ffffff;
						}
					}
				}

				.item-bottom {
					.share-list {
						width: 75%;

						.share-item {
							/** 文本1 */
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(166, 166, 166, 1);
							margin-top: 12rpx;

							text {
								/** 文本2 */
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(212, 48, 48, 1);
							}
						}
					}

					.item-bottom-btn {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);

					}
				}
			}
		}
	}

	// 品牌商家
	.brand-merchant {

		.merchant-num {

			/** 文本4 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				/** 文本3 */
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(247, 5, 5, 1);
			}
		}

		.merchant {
			width: 162rpx;
			margin-right: 28rpx;

			image {
				width: 162rpx;
				height: 124rpx;
				opacity: 1;
				border-radius: 10rpx;
			}

			.text {
				width: 162rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
				margin-top: 18rpx;
				text-align: center;
			}
		}
	}

	// 推荐物品
	.goods {
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx 0;

		.goods-top {
			.tabs {
				.tab {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					margin-right: 24rpx;
				}

				.tab-on {
					font-weight: 700;
					color: rgba(0, 0, 0, 1);
				}
			}

			.shop-btn {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding: 4rpx 24rpx;
				border-radius: 30rpx;
				border: 1px solid rgba(238, 33, 45, 1);
			}
		}

		.goods-list {
			padding: 30rpx 0;

			.item {
				width: 48%;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 1);

				.img {
					width: 100%;
					height: 288rpx;
					border-radius: 20rpx 20rpx 0 0;
					background: #ff0000;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx 20rpx 0 0;
					}
				}

				.info {
					padding: 18rpx;

					.title {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: rgba(0, 0, 0, 1);
					}

					.type-list {
						padding: 12rpx 0;
					}

					.type {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
						padding: 0 12rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(255, 232, 234, 1);
						letter-spacing: 0.4rpx;
						margin-left: 14rpx;
						margin-bottom: 10rpx;
						white-space: nowrap;
					}

					.merit-list {
						padding: 0 0 12rpx;

						.merit {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(82, 104, 139, 1);
							padding: 0 6rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4rpx;
							background: rgba(248, 249, 253, 1);
							letter-spacing: 0.4rpx;
							margin-left: 14rpx;
							margin-bottom: 10rpx;
							white-space: nowrap;
						}
					}

					.price-info {
						.price {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);

							text {
								font-size: 36rpx;
								font-weight: 700;
							}
						}

						.wants {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(166, 166, 166, 1);
						}
					}
				}
			}
		}
	}

	// 我的需求
	.demand-box {
		.demand-num {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(212, 212, 229, 1);
		}

		.demand-swiper {
			position: relative;
			width: 100%;
			min-height: 200rpx;

			.swiper-box,
			.swiper-item {
				width: 100%;
				height: 220rpx;
			}

			// 需求图片及信息
			.demand-info {
				margin-top: 30rpx;
				position: relative;

				.demand-info-tip {
					position: absolute;
					left: 0px;
					top: 0px;
					width: 66rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;

				}

				image {
					display: block;
					margin: 0;
					width: 236rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}

				.demand-info-l {
					width: calc(100% - 236rpx - 20rpx);
					height: 210rpx;

					.info-tit {
						width: 100%;
						margin-bottom: 8rpx;
					}

					.info-money {
						width: 100%;
						margin-bottom: 8rpx;

						.rent-box {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);

							text {
								font-size: 36rpx;
								font-weight: 700;
								color: rgba(238, 33, 45, 1);
							}
						}

						.transfer-box {
							margin-left: 18rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);

							text {
								font-weight: 700;
							}
						}
					}

					.advantage-box {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);

						.advantage {
							padding: 0 10rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4px;
							background: rgba(255, 232, 234, 1);
							letter-spacing: 0.4rpx;
							margin-left: 14rpx;
							margin-bottom: 10rpx;
							white-space: nowrap;
						}
					}
				}
			}

			// 适合场所

			.suitable-box {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(82, 104, 139, 1);
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);

				.suitable {
					display: inline-block;
					letter-spacing: 0.4rpx;
					padding: 10rpx;
					border-radius: 4rpx;
					background: rgba(248, 249, 253, 1);
					margin-left: 12rpx;
					white-space: nowrap;
				}
			}

			// 浏览咨询统计
			.visit-box {
				padding: 30rpx 0;

				.visit-advtar {
					width: 40%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}

				.visit-l {
					width: 60%;
					height: 46rpx;

					.visit-num {
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
					}
				}

			}

			// 匹配信息
			.matching-box {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}

	.item-main {
		padding-bottom: 36rpx;
		background-color: #ffffff;
		// margin: 0rpx 28rpx;
		border-radius: 2rpx;

		// padding: 0rpx 24rpx 0rpx 28rpx;
		.item-top {
			// margin: 0rpx 24rpx 0rpx 28rpx;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 86rpx;

			.left {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}

			.right {
				border-radius: 10rpx;
				background-color: rgb(238, 33, 45);
				color: rgba(255, 255, 255, 1);
				font-size: 24rpx;
				width: 122rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.item-center {
			display: flex;
			justify-content: space-between;
			margin-top: 36rpx;
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);

			.acea-row {
				display: flex;
				align-items: center;

				.item-img {
					width: 170rpx;
					height: 144rpx;
					border-radius: 10rpx;
					margin-right: 18rpx;
				}

				.content-main {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 20px;
					color: rgba(128, 128, 128, 1);
					width: calc(100% - 188rpx);

					p {
						margin: 0;
						padding: 0;
					}
				}
			}

			span {
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}
		}

		.item-bottom {
			p {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(166, 166, 166, 1);
			}

			.bottom-btn {
				padding-bottom: 36rpx;
				margin-top: 18rpx;
				display: flex;
				justify-content: space-between;

				span {
					font-size: 24rpx;
					color: rgba(128, 128, 128, 1);
					width: 90rpx;
					line-height: 44rpx;
					border-radius: 4rpx;
					border: 2rpx solid rgba(229, 229, 229, 1);
					display: flex;
					justify-content: center;
				}
			}
		}
	}

	.noData {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>